<template>
  <div class="login">
    <header-v></header-v>
    <Content>
      <Row class="bg" type="flex" align="middle" style="height:750px;">
        <Col :lg="{span:7,offset:14}" :xs="{span:24}">
          <Card :bordered="false">
            <img slot="title" src="../../assets/images/header-log.png" alt="" srcset="">
            <p style="text-align:left" slot="title">密码登陆</p>
            <Form ref="formItem" :model="formItem" :rules="ruleInline">
              <FormItem prop="user">
                <Input type="text" v-model="formItem.user" placeholder="请输入账号">
                  <Icon type="ios-person-outline" slot="prepend"></Icon>
                </Input>
              </FormItem>
              <FormItem prop="password">
                <Input type="password" v-model="formItem.password" placeholder="请输入密码">
                  <Icon type="ios-lock-outline" slot="prepend"></Icon>
                </Input>
              </FormItem>
              <FormItem>
                <Row>
                  <Col span="12">
                    <CheckboxGroup v-model="formItem.checkbox">
                      <Checkbox label="记住密码"></Checkbox>
                    </CheckboxGroup>
                  </Col>
                  <Col span="12" style="text-align:right">
                    <span style="cursor:pointer" @click="toForget"> 忘记密码</span>
                  </Col>
                </Row>
              </FormItem>
              <FormItem>
                <Button type="primary" long @click="handleSubmit('formItem')">登陆</Button>
              </FormItem>
            </Form>
          </Card>
        </Col>
      </Row>
    </Content>
   <footer-v></footer-v>
  </div>
</template>

<script>
import HeaderV from "../../components/Header.vue";
import FooterV from "../../components/Footer.vue";
export default {
  components: {
    HeaderV,
    FooterV
  },
  data() {
    return {
      formItem: {
        user: "",
        password: "",
        checkbox: []
      },
      ruleInline: {
        user: [
          {
            required: true,
            message: "用户名不能为空",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur"
          },
          {
            type: "string",
            min: 6,
            message: "密码长度不能小于6位",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$Message.success("登陆成功!");
          setTimeout(()=>{
            this.$router.push({
              name:'index'
            },2000)
          })
        } else {
          this.$Message.error("输入有误");
        }
      });
    },
    toForget(){
      this.$router.push({
        name:"forget"
      })
    }
  }
};
</script>

<style lang="less">
.login {
  .bg {
    background: url("../../assets/images/content-banner.jpg") no-repeat;
    background-size: 100% 100%;
    .ivu-card-head {
      text-align: center;
      img {
        width: 80%;
      }
    }
  }
  .ivu-layout-header {
    height: auto;
    line-height: initial;
    background: #fff;
    padding: 40px 0;
  }
  .ivu-layout-footer{
    p{
      text-align: center;
      font-weight: bold;
    }
  }
}
</style>